<!--
@name:dialogHealthTask
@author:Zhenglei
@date:16:16
@description:dialogHealthTask
@update:2022/8/2216:16
-->
<template>
  <el-dialog :title="title"
             :visible.sync="visible"
             :before-close="modalClose"
             append-to-body
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="50%">
    <el-form :model="subData"
             label-position="right"
             label-width="150px"
             ref="formModelRef"
             :rules='formModelRules'>
      <el-form-item label="任务名称：" prop="name">
        <el-input class="w-300" v-model="subData.name" placeholder="请输入任务名称" clearable></el-input>
      </el-form-item>
      <!--      <el-form-item label="心电：">-->
      <!--        <el-checkbox v-model="subData.electrocardioStatus">心电</el-checkbox>-->
      <!--      </el-form-item>-->
      <el-form-item label="必填任务：">
        <el-checkbox v-model="subData.changeStatus">是</el-checkbox>
      </el-form-item>
      <el-form-item label="主题/项目：" class="is-required">
        <el-button type="primary"
                   @click="handleOption('add',null,null)">新 增
        </el-button>
      </el-form-item>
      <el-form-item>
        <element-table
          :columns="columns"
          :data="subData.healthMapInitiativeTaskThemes">

          <template v-slot:option="{row,index}">
            <el-button type="primary"
                       @click="handleOption('edit',index, row)">编辑
            </el-button>
            <el-button type="warning"
                       v-if="row.mustStatus===0"
                       @click="handleOption('setting',index, row)">设为必做项目
            </el-button>
            <el-button type="info"
                       v-else
                       @click="handleOption('cancel',index, row)">取消必做项目
            </el-button>
            <el-button type="danger"
                       @click="handleOption('del',index, row)">删除
            </el-button>
          </template>
        </element-table>

      </el-form-item>
      <el-form-item label="奖励金币：" prop="goldAward">
        <el-input class="w-300" v-model="subData.goldAward" placeholder="请输入奖励金币" clearable></el-input>
      </el-form-item>
      <el-form-item label="排序：" prop="orderSort">
        <el-input class="w-300" type="number" v-model="subData.orderSort" placeholder="请输入排序" clearable></el-input>
      </el-form-item>

    </el-form>
    <p align="center">
      <el-button @click="modalClose"
                 type="info">取 消
      </el-button>
      <el-button type="primary"
                 v-prevent-re-click
                 @click="handleOption('save', null,null)">保 存
      </el-button>
    </p>
    <dialog-theme v-if="showDialog" :visible.sync="showDialog" :themeDataObj="themeDataObj"
                  @handleResultData="handleResultData"/>
  </el-dialog>

</template>

<script>
import ElementTable from "../../../../base/ElementTable";
import dialogUpdateTheme from "./dialogUpdateTheme";

export default {
  name: "dialogHealthTask",
  props: {
    dataObj: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      subData: {
        name: '',
        electrocardioStatus: 0,
        changeStatus: false,
        goldAward: '',
        orderSort: '',
        healthMapInitiativeTaskThemes: []
      },
      showDialog: false,
      themeDataObj: {},
      title: '新 增',
      isEdit: false,
      index: 0,
      columns: [
        {
          label: '类型',
          prop: 'themeTypeName',
          align: 'center'
        }, {
          label: '名称',
          prop: 'themeName',
          align: 'center',

        }, {
          label: '单项任务名称',
          prop: 'aliasName',
          align: 'center'
        }, {
          label: '排序',
          prop: 'orderSort',
          align: 'center'
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
          width: 360
        }
      ],
      formModelRules: {
        name: [{required: true, message: '请输入任务名称', trigger: 'blur'},],
        goldAward: [{
          pattern: /^[1-9]\d*$/,
          required: true,
          message: '请输入大于0的整数',
          trigger: 'blur'
        },],
        orderSort: [{
          required: true,
          message: '请输入排序',
          trigger: 'blur'
        },],
      }

    }
  },
  created() {
    if (this.dataObj.id) {
      this.title = '编 辑'
      this.getDetail()
    } else {
      this.title = '新 增'
    }
  },
  methods: {
    modalClose() {
      this.$emit('update:visible', false);
    },
    handleOption(op, index, row) {
      switch (op) {
        case 'add':
          this.themeDataObj = {}
          this.isEdit = false
          this.showDialog = true
          break;
        case 'edit':
          this.themeDataObj = row
          this.isEdit = true
          this.index = index
          this.showDialog = true
          break;
        case 'setting':
          this.subData.healthMapInitiativeTaskThemes[index].mustStatus = 1
          break
        case 'cancel':
          this.subData.healthMapInitiativeTaskThemes[index].mustStatus = 0
          break
        case 'del':
          this.subData.healthMapInitiativeTaskThemes.splice(index, 1)
          break
        case 'save':
          this.$refs.formModelRef.validate(valid => {
            if (valid) {
              if (this.subData.healthMapInitiativeTaskThemes.length===0){
                this.$message.warning('至少增加一个主题/项目')
                return
              }
              let bean = JSON.parse(JSON.stringify(this.subData))
              bean.changeStatus = bean.changeStatus ? 1 : 0
              // bean.electrocardioStatus = bean.electrocardioStatus ? 1 : 0
              this.post(this.api.healthMap.updateInitiativeTask, bean).then((res) => {
                if (res.data.code === '200') {
                  this.$message.success('更新成功!');
                  this.$parent.getList();
                  this.modalClose();
                }
              })

            }
          })

          break

      }

    },
    getDetail() {
      this.post(this.api.healthMap.getInitiativeTaskDetail, {
        id: this.dataObj.id
      }).then((res) => {
        if (res.data.code === '200') {
          this.subData = Object.assign(this.subData, res.data.object)
          this.subData.changeStatus = this.subData.changeStatus === 1
          // this.subData.electrocardioStatus=this.subData.electrocardioStatus === 1
        }
      })
    },
    //接收数据
    handleResultData(data) {
      console.log('接收数据-------', data)
      if (this.isEdit) {
        //编辑
        this.$set(this.subData.healthMapInitiativeTaskThemes, this.index, data)
      } else {
        //新增
        this.subData.healthMapInitiativeTaskThemes.push(data)
      }
    }
  },
  components: {
    'element-table': ElementTable,
    'dialog-theme': dialogUpdateTheme
  }
}
</script>

<style scoped>

</style>
